/**
 * Created by quxiangqian on 2018/6/5.
 */
export  class TabPanel extends React.Component {
    state={
      count:0,
      command:[],
      selectedIndex:0,
      i:1,
      disparga:false,
    }

    add=(panel)=>{
       let children=React.Children.map(this.props.children,(child)=>{
          return child;
       });
       this.state.command.map(item=>{
         item._body.className="body hide"
         item._head.className="head"
       })
       children.push(panel);
       this.props.children=children;
       this.state.command=[];
       this.state.selectedIndex=children.length-1;
       this.props.selectedIndex=this.state.selectedIndex;

       this.setState(this.state);
       //this.selected(children.length-1);

       //this.selected(children.length-1);
    }

    isOverFlow=()=>{
       let bl=false;
       if(this.props.defaultPos==="left"||this.props.defaultPos==="right"){
         this.scroll.scrollTop+=10;
         bl=this.scroll.scrollHeight>this.scroll.clientHeight;
       }else
       {
         this.scroll.scrollLeft+=10;
         bl=this.scroll.scrollWidth>this.scroll.clientWidth;
       }
       console.log("是否溢出",bl);
       if(bl){
         this.argaa.style.display="block";
         this.argab.style.display="block";
       }else
       {
         this.argaa.style.display="none";
         this.argab.style.display="none";
       }
    }

    selected=(index)=>{
      this.state.command.map(item=>{
        item._body.className="body hide"
        item._head.className="head"
      })
      this.state.command[index]._body.className="body active"
      this.state.command[index]._head.className="head active"

      // let head=this.state.command[index]._head;
      // if(this.props.defaultPos==="left"||this.props.defaultPos==="right"){
      //     this.scroll.scrollTop=this.state.command[index]._head.offsetTop;
      // }else{
      //
      //     if(this.state.selectedIndex>index){
      //       this.clearTime();
      //       this.state.time = setInterval(()=> {
      //          this.state.i+=5;
      //
      //          if(this.scroll.scrollLeft<=head.offsetLeft-head.clientWidth){
      //              this.scroll.scrollLeft=head.offsetLeft-head.clientWidth;
      //              console.log("向左边移动");
      //              this.state.i=1;
      //              this.clearTime();
      //          }else{
      //            this.scroll.scrollLeft-=this.state.i;
      //          }
      //         },100)
      //
      //
      //     }else{
      //        this.clearTime();
      //        this.state.time = setInterval(()=> {
      //          this.state.i+=10;
      //         if(this.scroll.scrollLeft>=head.offsetLeft-head.clientWidth){
      //             this.scroll.scrollLeft=head.offsetLeft-head.clientWidth;
      //             console.log("向右边移动");
      //             this.state.i=1;
      //             this.clearTime();
      //         }else{
      //           this.scroll.scrollLeft+=this.state.i;
      //         }
      //        },100)
      //     }
      //     //this.scroll.scrollLeft=this.scroll.scrollLeft-this.state.command[index]._head.clientWidth;
      // }
      this.state.selectedIndex=index;
      this.props.selectedIndex=index;
    }

    remove=(index)=>{
      let children=React.Children.map(this.props.children,(child)=>{
         return child;
      });
      let filter= children.filter((item,i)=>{
             return index!==i;
      });
      this.state.command.map((item,i)=>{
        if(i!==index-1){
          item._body.className="body hide"
          item._head.className="head"
        }else{
          item._body.className="body active"
          item._head.className="head active"
        }

      })
      this.props.children=filter;
      this.state.command=[];
      this.props.selectedIndex=index-1;
      this.state.selectedIndex=index-1;

      this.setState(this.state)
    }

    changePos=(pos)=>{
      this.tabpanel.className="tab-panel "+pos
      this.props.defaultPos=pos;
      this.state.command=[];



      this.setState(this.state);
    }

    startArg=(e)=>{
         this.state.time = setInterval(()=> {
            this.state.i+=10;
            if(this.props.defaultPos==="left"||this.props.defaultPos==="right"){
                this.scroll.scrollTop-=this.state.i;
            }else{
                this.scroll.scrollLeft-=this.state.i;
            }

         },100)
    }

    endArg=(e)=>{
      this.state.time = setInterval(()=> {
         this.state.i+=10;
         if(this.props.defaultPos==="left"||this.props.defaultPos==="right"){
             this.scroll.scrollTop+=this.state.i;
         }else{
             this.scroll.scrollLeft+=this.state.i;
         }
      },100)
    }

    clearTime=(e)=>{
      if(this.state.time){
         this.state.i=1;
        clearInterval(this.state.time);
      }
    }

    componentDidUpdate(){
      this.isOverFlow();
    }

    render(){
         let headers=[];
         let bodys=[];
         let index=0;
         if(this.props.selectedIndex)
         {
            this.state.selectedIndex=this.props.selectedIndex;
         }
         React.Children.map(this.props.children,
            (child) => {
              let command={}
              let i=index;
              let headClassName="head";
              let bodyClassName="body hide";
              if(this.state.selectedIndex===i){
                  headClassName="head active";
                  bodyClassName="body active";
              }
              //if(this.props.in)
              let body=<div className={bodyClassName} ref={r=>command._body=r}>{child.props.children}</div>
              let head=<div className={headClassName} onClick={(e)=>{
                   this.selected(i);
              }} ref={r=>command._head=r}>
                  {child.props.title}{child.props.closebutton?<i class="far fa-times-circle" onClick={(e)=>{
                     e.stopPropagation();
                     e.nativeEvent.stopImmediatePropagation();
                     this.remove(i);
                  }}></i>:""}
                  </div>;
              headers.push(head)
              bodys.push(body)
              this.state.command.push(command);
              index++;
            }

        );
         let arga={a:"left",b:"right"}
         if(this.props.defaultPos==="left"||this.props.defaultPos==="right"){
            arga={a:"up",b:"down"}
         }
         return (
            <div className={"tab-panel "+(this.props.defaultPos?this.props.defaultPos:"top")} ref={r=>this.tabpanel=r}>
               <div className="headers">

                   <i
                    className={"fas fa-angle-"+arga.a}
                    onMouseDown={this.startArg}
                    onMouseUp={this.clearTime}
                    ref={r=>this.argaa=r}
                    style={{display:"none"}}
                   ></i>

                   <div class="rect" ref={r=>this.scroll=r}>
                      <div class="scroll" ref={r=>this.scroll1=r}>
                      {headers}
                      </div>
                   </div>
                   <i
                     className={"fas fa-angle-"+arga.b}
                     onMouseDown={this.endArg}
                     onMouseUp={this.clearTime}
                     ref={
                       r=>{
                         this.argab=r
                         //this.isOverFlow();
                       }
                     }
                     style={{display:"none"}}
                   ></i>

               </div>
               <div className="bodys">
                   {bodys}
               </div>
            </div>
        )
    }
}
